<template>
  <div>
    <div class="search">
      <nut-searchbar v-model="state.keyword" input-background="#fff" @search="searchOf" @click-right-icon="searchOf"
        @blur="searchOf">
        <template v-slot:leftin>
          <Search2 />
        </template>
        <template v-slot:rightout> 搜索 </template>
      </nut-searchbar>
    </div>
    <div class="menu">
      <nut-menu active-color="#196BFE">
        <template #icon>
          <TriangleDown />
        </template>
        <nut-menu-item v-model="state.value1" :options="state.options1" />
        <nut-menu-item v-model="state.orderBy" @change="handleChange" :options="state.options2">
        </nut-menu-item>
      </nut-menu>
    </div>
    <div class="cart-list">
      <div class="cart-item flex-a" v-if="state.list.length > 0" v-for="item in state.list" :key="item.id"
        :class="item.show ? 'show' : 'hidden'" @click="jumpTo(item)">
        <nut-card :img-url="item.goodsCoverImg" :title="item.goodsName" :shopDesc="item.goodsIntro"
          :price="item.sellingPrice + ''" :vipPrice="item.originalPrice + ''">
          <template #footer>
          </template>
        </nut-card>
      </div>
      <nut-empty v-else description="无数据"></nut-empty>
    </div>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom } from '@tarojs/taro';
import { reactive, onMounted } from 'vue';
import { TriangleDown, Search2 } from '@nutui/icons-vue-taro';
import { search } from '../../../../api/index'
export default {
  components: {
    TriangleDown,
    Search2
  },
  setup() {
    const state = reactive({
      list: [],
      keyword: '',
      pageNumber: 1,
      options1: [
        { text: '全部商品', value: 0 }
      ],
      options2: [
        { text: '综合排序', value: '' },
        { text: '发布时间', value: 'new' },
        { text: '价格升序', value: 'price' }
      ],
      value1: 0,
      orderBy: '',
    });
    const jumpTo = (item) => {
      Taro.navigateTo({ url: '/packageA/pages/productDetail/index?goodsId=' + item.goodsId });
    }
    onMounted(() => {

    });
    const searchOf = () => {
      search({ keyword: state.keyword, pageNumber: state.pageNumber, orderBy: state.orderBy }).then(res => {
        if (res.resultCode == 200) {
          let list = res.data.list
          let arr = state.list
          list.forEach(item => {
            item.show = item.originalPrice ? true : false
          })
          state.list = arr.concat(list)
        }
      })
    }
    const handleChange = (val) => {
      state.list = []
      state.pageNumber = 1
      searchOf()
    };
    useReachBottom(() => {
      state.pageNumber++
      searchOf()
    })
    return { state, jumpTo, handleChange, searchOf };
  }
};
</script>
<style lang="scss">
.cart-list {
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;

  .nut-price {
    color: #F25C26;
    font-weight: bold;
    margin-right: 10rpx;
  }

  .cart-item.show {
    .nut-card__right__price__origin {
      display: inline-block;

      view {
        text-decoration: line-through;
        color: #909090;
        font-weight: normal;
        font-size: 26rpx;
      }
    }
  }

  .cart-item.hidden {
    .nut-card__right__price__origin {
      display: none;

      view {
        text-decoration: line-through;
      }
    }
  }

  .cart-item {
    margin-bottom: 20rpx;
    box-shadow: 0 0 20rpx 20rpx #f9f9f9;
    border-radius: 20rpx;

    .nut-tag {
      color: #FCB367;
      font-size: 26rpx;
      font-weight: 600;
      background: transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .nut-card .nut-card__left {
      width: 200rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
        margin: 10%;
      }
    }

    .nut-card .nut-card__right {
      padding: 16rpx 20rpx;
      margin-left: 10rpx;
    }
  }
}
</style>